<template>
  <h1>(shallowRef,shallowReactive的使用)</h1>
  <h2>姓名:{{persion.name}}</h2>
  <h2>年龄:{{persion.age.j1.age}}</h2>
  <h2>{{num}}</h2>
  <button @click="persion.name+='!'">修改姓名</button>
  <button @click="persion.age.j1.age++">修改年龄</button>
  <button @click="num++">修改num</button>
</template>


<script>
import { shallowReactive, shallowRef } from 'vue'
export default {
  setup () {

    // 只考虑第一层数据的响应式
    const persion = shallowReactive({
      name: '张三',
      age: {
        j1: {
          age: 18
        }
      }
    })
    // 只能是基本数据类型,不可以是引用数据类型
    let num = shallowRef(0)

    return {
      persion,
      num
    }
  }
}
</script>